import { parseTime } from '@/utils';
import ElMessage from '@/utils/message';
export default {
  // model
  data() {
    return {
      clipType: false,
      isBtnFocus: false
    };
  },
  mounted() {
    if (!navigator || !navigator.clipboard) this.clipType = true;
  },
  // 函数
  methods: {
    changeClipType() {
      this.clipType = !this.clipType;
    },
    async obtainClipbrd(event) {
      if (this.clipType || !this.isPasteAble) return; else if (!navigator || !navigator.clipboard) {
        // 需要在安全网络下进行才可以，localhost或者https，127.0.0.1是本机域名是安全的，所以可以获取到clipboard，谷歌现在很多api都是必须要求https的情况的
        ElMessage.error('当前浏览器版本不支持点击上传，请使用快捷键"Ctrl+V"进行粘贴上传');
        this.clipType = true;
        document.addEventListener('paste', this.paste);
        return;
      }
      try {
        const result = await navigator.permissions.query({ name: 'clipboard-read' });
        // If permission to read the clipboard is granted or if the user will
        // be prompted to allow it, we proceed.

        if (result.state === 'granted' || result.state === 'prompt') {
          const clipboardItems = await navigator.clipboard.read();
          for (const clipboardItem of clipboardItems) {
            for (const type of clipboardItem.types) {
              if (type.match(/^image\//i)) {
                const blob = await clipboardItem.getType(type);
                const fileName = blob.name || this.getFileName(type);
                const file = new File([blob], fileName, { type: blob.type });
                // console.log(file);
                this.pasteCallback(file);
              } else if (type === 'text/plain') {
                ElMessage.error('剪贴板内容非图片');
                const fileReader = new FileReader();
                fileReader.onload = (e) => {
                  console.log('内容为文字', e.target.result);
                };
                // blob：不是blob的话，要转换为Blob对象或者File对象，File是Blob对象的子类，拥有Blob对象的属性和方法
                const blob = await clipboardItem.getType(type);
                fileReader.readAsText(blob);
              } else {
                ElMessage.error('剪贴板内容非图片');
                // console.log('未识别剪贴板内容');
              }
            }
          }
        }
      } catch (e) {
        ElMessage.error('未获取到剪贴板内容');
        console.error(e);
      }
    },
    getFileName(type) {
      return `${parseTime(new Date(), '{y}{m}{d}_{h}{i}{s}')}.${type.replace('image/', '')}`;
    },
    onFocusClip(event) {
      if (this.clipType) document.addEventListener('paste', this.paste);
      this.isBtnFocus = true;
      console.log('onFocusClipBtn');
    },
    onBlurClip(event) {
      if (this.clipType) document.removeEventListener('paste', this.paste);
      this.isBtnFocus = false;
      console.log('onBlurClipBtn');
    },
    paste(event) {
      console.error('监听到粘贴：', event);
      if (!this.isPasteAble) return;
      const items = (event.clipboardData || window.clipboardData).items;
      // console.log(items);

      if (!items || items.length === 0) {
        ElMessage.error('未获取到剪贴板内容');
        return;
      }

      const item = items[0]; // 只取第一个内容 ，否则可用 for (var i = 0, len = clipboardData.items.length; i < len; i++) {
      if (item.kind === 'string' && item.type === 'text/plain') {
        item.getAsString((str) => {
          ElMessage.error('剪贴板内容非图片');
          console.info('内容为文字', str);
        });
        // console.info('内容为文字', clipboardItem.getAs("text/plain"));
        // } else if (item.kind === 'file') { // file 一般是各种截图base64数据
      } else if (item.kind === 'file' && item.type.match(/^image\//i)) {
        // if (item.type.indexOf('image') !== -1) {
        const fileBase = item.getAsFile();
        const fileName = this.getFileName(item.type);
        const file = new File([fileBase], fileName, { type: fileBase.type });
        this.pasteCallback(file);
        // const data = new FormData();
        // data.append('file', file);
        // //    data.append(
        // //     'test_key', // key
        // //     blob / file, //value,
        // //     'test_file_name' // name
        // // );
        // console.log(file);

        // pasteFile就是获取到的文件
        // var reader = new FileReader();
        // reader.onload = function (event) {
        //   var base64Img = event.target.result;
        //   let url = ''; // 你的后台上传地址
        //   //     axios.post(url, data).then(res => {
        //   //         console.log(res)
        //   //     }).catch(error => {
        //   //         console.log(error)
        //   //     })
        // }; // data url
        // reader.readAsDataURL(pasteFile);
      } else {
        ElMessage.error('剪贴板内容非图片');
        // console.error('未识别剪贴板内容');
      }
    }
  }
};
